<template>
  <!-- 搜索表单 -->
  <div class="filterContent">
    <a-form layout="inline" :model="filterForm">
      <a-form-item label="电站名称">
        <a-select
          v-model:value="filterForm.stationId"
          placeholder="请选择电站"
          style="width: 200px"
          allowClear
          show-search
          optionFilterProp="label"
          filter-option
        >
          <a-select-option
            v-for="item in stationNameOptions"
            :key="item.stationId"
            :value="item.stationId"
            :label="item.stationName"
          >
            {{ item.stationName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="操作日期">
        <a-range-picker
          v-model:value="filterForm.dateRange"
          :disabled-date="disabledDate"
          format="YYYY-MM-DD"
          valueFormat="YYYY-MM-DD"
        />
      </a-form-item>
      <a-form-item label="是否关联故障">
        <a-select
          class="formSelect"
          placeholder="请选择"
          v-model:value="filterForm.relateFault"
          style="width: 120px"
          allow-clear
        >
          <a-select-option :value="1">是</a-select-option>
          <a-select-option :value="0">否</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="操作人：" name="linkCap">
        <a-input
          v-model:value="filterForm.operator"
          class="formInput"
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="handleSearch" class="filterBtn"
          >查询</a-button
        >
        <a-button class="filterBtn greenBtn" @click="handleAdd">新建</a-button>
        <a-button
          type="primary"
          class="filterBtn greenpPlainBtn"
          @click="handleFaultModal"
          >导入</a-button
        >
        <a-button
          type="primary"
          @click="handleExport"
          class="filterBtn yellowBtn"
          >导出</a-button
        >
      </a-form-item>
    </a-form>
  </div>
  <!-- 表格 -->
  <div class="tableContent" ref="tableContainerRef">
    <a-table
      :dataSource="tableData"
      :columns="columns"
      size="small"
      :scroll="tableScroll"
      :pagination="false"
      :loading="tableLoading"
      bordered
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'handle'">
          <a-button type="link" @click="handleEdit(record)">编辑</a-button>
        </template>
      </template>
    </a-table>
    <a-pagination
      v-model:current="filterForm.current"
      v-model:page-size="filterForm.size"
      :total="total"
      position="bottomRight"
      show-size-changer
      @change="getList"
      :show-total="(total) => `总共 ${total} 条`"
    >
      <template #buildOptionText="props">
        <span>{{ props.value }}条/页</span>
      </template>
    </a-pagination>
  </div>
  <!-- 新建操作 -->
  <OperationRecordModal
    :operationRecordVisible="modalVisible"
    :editData="editData"
    :stationNameOptions="stationNameOptions"
    @update:operationRecordVisible="
      (val) => {
        modalVisible = val
      }
    "
    @success="handleSuccess"
  />
  <!-- 导入 -->
  <OperationModal
    :visible="operationVisible"
    @update:visible="(val) => (operationVisible = val)"
    @getOperationRecordPage="handleSearch"
  />
</template>
<script setup>

import dayjs from "dayjs"
import utilsExportFile from "@/utils/exportFile"
import useTableScroll from "@/hooks/useTableScroll"
import OperationRecordModal from "./components/addOperationRecordModal.vue"
import OperationModal from "./components/OperationModal.vue"

const route = useRoute()
const tableData = ref([])
const total = ref(0)
const $api = inject("$api")
const filterForm = reactive({
  dateRange: [],
  stationId: null,
  relateFault: null,
  operator: "",
  current: 1,
  size: 20,
})
const columns = [
  {
    title: "操作日期",
    dataIndex: "operateDate",
    key: "operateDate",
    width: 100,
    align: "center",
    customCell: (_, index) => {
      //if (index === 0) return { rowSpan: 1 }
      // 判断当前行与上一行数据是否相同
      const prevRow = tableData.value[index - 1]
      const currentRow = tableData.value[index]
      if (prevRow && prevRow.operateDate === currentRow.operateDate) {
        // 如果与上一行相同，则不显示
        return { rowSpan: 0 }
      }
      // 计算当前行向下有多少行与当前行相同
      let rowSpan = 1
      for (let i = index + 1; i < tableData.value.length; i++) {
        if (tableData.value[i].operateDate === currentRow.operateDate) {
          rowSpan++
        } else {
          break
        }
      }

      return { rowSpan }
    },
  },
  {
    title: "电站名称",
    dataIndex: "stationName",
    key: "stationName",
    width: 150,
    align: "center",
    customCell: (_, index) => {
      //if (index === 0) return { rowSpan: 1 }
      // 判断当前行与上一行数据是否相同
      const prevRow = tableData.value[index - 1]
      const currentRow = tableData.value[index]
      if (
        prevRow &&
        prevRow.stationName === currentRow.stationName &&
        prevRow.operateDate === currentRow.operateDate
      ) {
        // 如果与上一行相同，则不显示
        return { rowSpan: 0 }
      }
      // 计算当前行向下有多少行与当前行相同
      let rowSpan = 1
      for (let i = index + 1; i < tableData.value.length; i++) {
        if (
          tableData.value[i].stationName === currentRow.stationName &&
          tableData.value[i].operateDate === currentRow.operateDate
        ) {
          rowSpan++
        } else {
          break
        }
      }
      return { rowSpan }
    },
  },
  {
    title: "操作编号",
    dataIndex: "operateCode",
    key: "operateCode",
    width: 160,
    align: "center",
  },
  {
    title: "操作类型",
    dataIndex: "operateTypeStr",
    key: "operateTypeStr",
    width: 150,
    align: "center",
  },
  {
    title: "操作日志",
    dataIndex: "operateLog",
    key: "operateLog",
    width: 500,
    align: "center",
  },
  {
    title: "运行情况描述",
    dataIndex: "runningDesc",
    key: "runningDesc",
    width: 250,
    align: "center",
  },
  {
    title: "待处理任务",
    dataIndex: "pendingTask",
    key: "pendingTask",
    width: 250,
    align: "center",
  },
  {
    title: "操作人",
    dataIndex: "createUserName",
    key: "createUserName",
    width: 120,
    align: "center",
  },
  {
    title: "操作时间",
    dataIndex: "createTime",
    key: "createTime",
    width: 140,
    align: "center",
  },
  {
    title: "更新人",
    dataIndex: "updateUserName",
    key: "updateUserName",
    width: 120,
    align: "center",
  },
  {
    title: "更新时间",
    dataIndex: "updateTime",
    key: "updateTime",
    width: 140,
    align: "center",
  },
  {
    title: "关联故障编号",
    dataIndex: "relateFaultCode",
    key: "relateFaultCode",
    width: 150,
    align: "center",
  },
  {
    title: "故障现象描述",
    dataIndex: "faultDesc",
    key: "faultDesc",
    width: 300,
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "handle",
    key: "handle",
    width: 150,
    align: "center",
    fixed: "right",
  },
]
//获取电站列表
const stationNameOptions = ref([])
const handleSearchStationName = async () => {
  const res = await $api.companyStationtList()
  stationNameOptions.value = res.data
  await nextTick()
}
//获取分页列表
const handleSearch = async () => {
  filterForm.current = 1
  await getList()
}
const tableLoading = ref(false)
const getList = async () => {
  tableLoading.value = true
  let params = {
    operateDateStart:
      filterForm.dateRange && filterForm.dateRange.length > 0
        ? filterForm.dateRange[0]
        : null,
    operateDateEnd:
      filterForm.dateRange && filterForm.dateRange.length > 0
        ? filterForm.dateRange[1]
        : null,

    ...filterForm,
  }
  const res = await $api.operateLogPage(params)
  tableData.value = res.data.records
  total.value = res.data.total
  tableLoading.value = false
}

const modalVisible = ref(false)
const editData = ref({})
//新增
const handleAdd = () => {
  editData.value = {}
  modalVisible.value = true
}
//编辑
const handleEdit = (record) => {
  editData.value = { ...record }
  modalVisible.value = true
}
//操作成功回调
const handleSuccess = () => {
  // 刷新表格数据
  handleSearch()
}
//导入运行操作记录
const operationVisible = ref(false)
const handleFaultModal = () => {
  operationVisible.value = true
}
//导出
const handleExport = async () => {
  let params = {
    operateDateStart:
      filterForm.dateRange && filterForm.dateRange.length > 0
        ? filterForm.dateRange[0]
        : null,
    operateDateEnd:
      filterForm.dateRange && filterForm.dateRange.length > 0
        ? filterForm.dateRange[1]
        : null,

    ...filterForm,
  }
  const res = await $api.operateLogExportData(params)
  utilsExportFile.exportFile(res, `运行操作记录.xlsx`)
}
const tableContainerRef = ref(null)
const { tableScroll } = useTableScroll(tableData, tableContainerRef, 100)
onMounted(() => {
  //console.log(route.query.operateCode)
  if (
    Object.keys(route.query).length > 0 &&
    route.query?.operateCode !== null
  ) {
    filterForm.operateCode = route.query.operateCode
  }
  handleSearch()
  handleSearchStationName()
})
</script>
<style lang="less" scoped>
.filterBtn {
  margin: 0 10px 0 0;
  &:last-child {
    margin-right: 0;
  }
}
.tableContent {
  background: #141414;
  padding: 8px;
}
:deep(.ant-table) {
  background: #141414;
}

:deep(.ant-pagination) {
  margin-top: 16px;
  text-align: right;
}
</style>
